<template>
  <el-container>
    <el-main>
      <el-table :data="tableValue" height="600" style="width: 100%">
        <el-table-column type="expand">
          <template #default="props">
            <p>
              Misc总次数(Misc杂项,聚合了所有其他I/O操作,如创建、删除、打开、关闭、流打开、流关闭等,这些操作没有字节计数) : <b>{{ props.row.countMisc}}</b>
            </p>
            <p>
              Misc最短执行时间-<b>{{props.row.minTimerMisc}}(皮秒)</b>
              =-=
              Misc最长执行时间-<b>{{props.row.maxTimerMisc}}(皮秒)</b>
            </p>
            <p>
              读取(Read)的字节总数(byte):<b>{{props.row.sumNumberOfBytesRead}}</b>
              =-=
              写入(Write)的字节总数(byte):<b>{{props.row.sumNumberOfBytesWrite}}</b>
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="eventName" label="对应事件" width="200px"/>
        <el-table-column label="物理I/O">
          <el-table-column prop="countStar" label="I/O总次数" width="100px"/>
          <el-table-column prop="minTimerWait" label="I/O最短执行时间(皮秒)" width="130px"/>
          <el-table-column prop="maxTimerWait" label="I/O最长执行时间(皮秒)" width="130px"/>
          <el-table-column prop="countRead" label="Read总次数" width="100px"/>
          <el-table-column prop="minTimerRead" label="Read最短执行时间(皮秒)" width="130px"/>
          <el-table-column prop="maxTimerRead" label="Read最长执行时间(皮秒)" width="130px"/>
       <!--   <el-table-column prop="sumNumberOfBytesRead" label="读取的字节总数(byte)" width="180px"/>-->
          <el-table-column prop="countWrite" label="Write总次数" width="100px"/>
          <el-table-column prop="minTimerWrite" label="Write最短执行时间(皮秒)" width="130px"/>
          <el-table-column prop="maxTimerWrite" label="Write最长执行时间(皮秒)" width="130px"/>
          <!--<el-table-column prop="sumNumberOfBytesWrite" label="写入的字节总数(byte)" width="180px"/>-->
         <!-- <el-table-column prop="countMisc" label="Misc总次数(Misc杂项,聚合了所有其他I/O操作,如创建、删除、打开、关闭、流打开、流关闭等,这些操作没有字节计数)"
                           width="220px"/>
          <el-table-column prop="minTimerMisc" label="Misc最短执行时间(皮秒)" width="150px"/>
          <el-table-column prop="maxTimerMisc" label="Misc最长执行时间(皮秒)" width="150px"/>-->
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>

<script>
import {computed,ref,reactive,toRefs} from "vue";
import {useStore} from 'vuex'

export default {
  name: "FileSummary",
  setup() {
    const store = useStore();

    const tableValue = computed(() => store.state.eventSummary);

    store.commit('setToggleHead', 'eventNames');

    return {
      tableValue,
    }

  }
}
</script>

<style scoped>

</style>